<!-- 主题设置抽屉 license by http://eleadmin.com -->
<template>
    <el-drawer
      size="300px"
      :visible="visible"
      :append-to-body="true"
      :title="'退货操作'"
      @update:visible="updateVisible" @open="init">
      <el-form label-width="77px" :model="form" class="ele-form-search">
        <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="申请单号">
                    <el-input v-model="form.vbillcode" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="客户编码">
                    <el-input v-model="form.custcode" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="客户名称">
                    <el-input v-model="form.custname" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="申请总数">
                    <el-input v-model="form.ntotalnum" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" v-if="materialItem.invcode">
            <el-col :lg="24" :md="24">
                <el-form-item label="药品编码">
                    <el-input v-model="materialItem.invcode" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" v-if="materialItem.invcode">
            <el-col :lg="24" :md="24">
                <el-form-item label="申请数量">
                    <el-input v-model="materialItem.nnum" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" v-if="materialItem.invcode">
            <el-col :lg="24" :md="24">
                <el-form-item label="含税单价">
                    <el-input v-model="materialItem.ntaxprice" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15" v-if="materialItem.invcode">
            <el-col :lg="24" :md="24">
                <el-form-item label="批号">
                    <el-input v-model="materialItem.vlotno" disabled></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="未入原因">
                    <el-select class="my-el-select" v-model="form.realreason">
                      <el-option v-for="item in returnReasonList" :key="item.code" :label="item.name" :value="item.name"/>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :lg="24" :md="24">
            <el-form-item label="后续处理">
              <el-select class="my-el-select" v-model="form.opertype">
                <el-option label="" value=""/>
                <el-option label="退厂" value="退厂"/>
                <el-option label="再销售" value="再销售"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="备注">
                    <textarea  v-model="form.remark" rows="8" style="width: 98%"></textarea>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="15">
            <el-col :lg="24" :md="24">
                <el-form-item label="">
                    <el-button
                  type="primary"
                  icon="el-icon-save"
                  class="ele-btn-icon"
                  @click="reload">确定
                </el-button>
                </el-form-item>
            </el-col>
        </el-row>
      </el-form>

    </el-drawer>
  </template>

  <script>
  import Locale from 'element-ui/lib/mixins/locale';
  // 默认主题色
  const DEFAULT_THEMES = [
    {
      name: 'default',
      value: null,
      color: '#1890ff'
    },
    {
      name: 'dust',
      value: '#5f80c7'
    },
    {
      name: 'sunset',
      value: '#faad14'
    },
    {
      name: 'volcano',
      value: '#f5686f'
    },
    {
      name: 'purple',
      value: '#9266f9'
    },
    {
      name: 'cyan',
      value: '#2bccce'
    },
    {
      name: 'green',
      value: '#33cc99'
    },
    {
      name: 'geekblue',
      value: '#32a2d4'
    }
  ];

  export default {
    name: 'EleProSetting',
    mixins: [Locale],
    emits: [
      'change-style',
      'change-color',
      'change-dark-mode',
      'change-weak-mode',
      'update:visible'
    ],
    props: {
      // 是否显示, 支持.sync修饰
      visible: Boolean,
      // 颜色选择器预设颜色
      data: Array,
      material:Array
    },
    data() {
      let chooseColor = this.color;
      if (this.color && typeof this.themes !== 'undefined' && this.themes !== null) {
        (this.themes.length ? this.themes : DEFAULT_THEMES).forEach((t) => {
          if (this.color === t.value) {
            chooseColor = null;
          }
        });
      }
      return {
        form:{},
        materialItem:{},
        returnReasonList:[],
        // 默认的主题色
        defaultThemes: DEFAULT_THEMES,
        // 颜色选择器选中颜色
        chooseColor: chooseColor
      };
    },
    mounted() {
      this.getReturnReasonList();
        console.log(this.data);
    console.log(this.material);
    if(this.data)
      {
        this.form = Object.assign({},this.data[0]);
      }
    },
    methods: {
      /* 修改visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      init(){
        this.form = {};
        this.materialItem = {};
        if(this.data && this.data.length>0)
        {
            this.form = Object.assign({},this.data[0]);
        }
        if(this.material && this.material.length>0)
        {
            this.materialItem = Object.assign({},this.material[0]);
            this.form.opertype = this.materialItem.opertype;
          this.form.realreason = this.materialItem.realreason;
        }

      },
      reload(){
        this.updateVisible(false);
        if(this.material && this.material.length>0)
        {
            this.$emit('donematerial',this.form.realreason,this.form.remark,this.form.opertype);
        }
        else
        {
            this.$emit('done',this.form.realreason,this.form.remark,this.form.opertype);

        }
      },
      getReturnReasonList(){
        this.$http.get('/dictdata/index?dictId=6&page=1&limit=1000').then(res => {
        this.returnReasonList = res.data.data.records;
      }).catch(e => {
        this.$message.error(e.message);
      });
      },
      /* 切换主题色 */
      changeColor(value) {
        if (value !== this.color) {
          this.$emit('change-color', value);
        }
      },
      /* 修改主题风格 */
      changeStyle(key, value) {
        this.$emit('change-style', {key: key, value: value});
      },
      setHeadStyle(value) {
        this.changeStyle('headStyle', value);
      },
      setSideStyle(value) {
        this.changeStyle('sideStyle', value);
      },
      setLayoutStyle(value) {
        this.changeStyle('layoutStyle', value);
      },
      setSideMenuStyle(value) {
        this.changeStyle('sideMenuStyle', value ? 'mix' : 'default');
      },
      setBodyFull(value) {
        this.changeStyle('bodyFull', value);
      },
      setFixedHeader(value) {
        this.changeStyle('fixedHeader', value);
      },
      setFixedSidebar(value) {
        this.changeStyle('fixedSidebar', value);
      },
      setFixedBody(value) {
        this.changeStyle('fixedBody', value);
        if (value) {
          document.body.style.width = null;
        }
      },
      setLogoAutoSize(value) {
        this.changeStyle('logoAutoSize', value);
      },
      setColorfulIcon(value) {
        this.changeStyle('colorfulIcon', value);
      },
      setSideUniqueOpen(value) {
        this.changeStyle('sideUniqueOpen', value);
      },
      setWeakMode(value) {
        this.$emit('change-weak-mode', value);
      },
      setDarkMode(value) {
        this.$emit('change-dark-mode', value);
      },
      setShowFooter(value) {
        this.changeStyle('showFooter', value);
        if (!value) {
          document.body.style.width = null;
        }
      },
      setShowTabs(value) {
        this.changeStyle('showTabs', value);
      },
      setTabStyle(value) {
        this.changeStyle('tabStyle', value);
      }
    }
  }
  </script>

  <style scoped>
  .ele-setting-wrapper {
    padding: 20px 18px;
  }

  .ele-setting-wrapper .ele-setting-title {
    font-size: 13px;
    margin-bottom: 15px;
  }

  /* 主题风格 */
  .ele-setting-wrapper .ele-setting-theme > div {
    width: 52px;
    height: 36px;
    line-height: 1;
    font-size: 18px;
    border-radius: 3px;
    margin: 0 20px 30px 0;
    padding: 14px 0 0 24px;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .2s;
  }

  .ele-setting-wrapper .ele-setting-theme > div:before,
  .ele-setting-wrapper .ele-setting-theme > div:after,
  .ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
    content: "";
    width: 100%;
    height: 10px;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    transition: background-color .2s;
  }

  .ele-setting-dark .ele-setting-theme > div {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  }

  .ele-setting-dark .ele-setting-theme > div:before,
  .ele-setting-dark .ele-setting-theme > div:after,
  .ele-setting-dark .ele-setting-theme > div > .ele-bg-primary {
    background: #1f1f1f;
  }

  .ele-setting-wrapper .ele-setting-theme > div:after {
    width: 14px;
    height: 100%;
  }

  .ele-setting-wrapper .ele-setting-theme > div.ele-side-dark:after,
  .ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
  .ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:before,
  .ele-setting-wrapper .ele-setting-theme > div.ele-layout-mix:after {
    background: #001529;
  }

  .ele-setting-dark .ele-setting-theme > div.ele-side-dark:after,
  .ele-setting-dark .ele-setting-theme > div.ele-head-dark:before,
  .ele-setting-dark .ele-setting-theme > div.ele-layout-mix:before,
  .ele-setting-dark .ele-setting-theme > div.ele-layout-mix:after {
    background: #262626;
  }

  .ele-setting-wrapper .ele-setting-theme > div.ele-head-light:before,
  .ele-setting-wrapper .ele-setting-theme > div.ele-head-dark:before,
  .ele-setting-wrapper .ele-setting-theme > div > .ele-bg-primary {
    z-index: 1;
  }

  /* 主题色选择 */
  .ele-setting-wrapper .ele-setting-colors {
    color: #fff;
    margin-bottom: 20px;
  }

  .ele-setting-wrapper .ele-setting-color-item {
    width: 20px;
    height: 20px;
    line-height: 22px;
    border-radius: 2px;
    margin: 8px 8px 0 0;
    display: inline-block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    vertical-align: top;
    position: relative;
    text-align: center;
    cursor: pointer;
  }

  /* 主题配置项 */
  .ele-setting-wrapper .ele-setting-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .ele-setting-wrapper .ele-setting-item .setting-item-title {
    flex: 1;
    line-height: 28px;
  }

  .ele-setting-wrapper .ele-setting-item .setting-item-control {
    line-height: 1;
    max-width: 95px;
  }

  .ele-setting-wrapper .el-divider {
    margin-bottom: 20px;
  }

  /* 颜色选择器 */
  .ele-setting-color-picker.el-color-picker {
    height: auto;
    margin-top: 8px;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__trigger {
    padding: 0;
    width: 20px;
    height: 20px;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__color {
    border: none;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__color-inner {
    border-radius: 2px;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__empty {
    background: linear-gradient(45deg, #00dbde 5%, #fc00ff 105%);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    border-radius: 2px;
    font-size: 0;
  }

  .ele-setting-color-picker.el-color-picker .el-color-picker__icon {
    font-size: 14px;
  }
  .el-row {
  margin-bottom: -10px;
  margin-top: 1px;
  display: flex;
  flex-wrap: wrap
}
  </style>
